<template>
  <CommonPage>
    <MyTable
      ref="$table"
      v-model:query-items="queryItems"
      :columns="columns"
      :get-data="dictApi.getDicts"
      :index="true"
      list-key="/dict:get"
    >
      <template #search>
        <MyTQI>
          <n-input
            v-model:value="queryItems.name"
            type="text"
            placeholder="请输入搜索关键词"
            clearable
          >
            <template #suffix>
              <n-icon size="20" :component="Search"></n-icon>
            </template>
          </n-input>
        </MyTQI>
        <MyTQI label="创建时间" :content-width="300">
          <n-date-picker
            v-model:formatted-value="queryItems.timeLimit"
            type="daterange"
            clearable
          />
        </MyTQI>
      </template>
      <template #action>
        <n-button v-permission="`/dict:post`" type="primary" @click="handleAdd">添加字典</n-button>
      </template>
    </MyTable>
    <MyModal
      ref="$form"
      :model-form="model"
      :disabled="type === 'view'"
      :width="900"
      @submit="handleSubmit"
    >
      <n-form-item
        label="字典名称"
        path="name"
        :rule="[{ required: true, message: '请输入字典名称' }]"
      >
        <n-input v-model:value="model.name" placeholder="请输入字典名称" maxlength="50" clearable />
      </n-form-item>
      <n-form-item
        label="字典编码"
        path="code"
        :rule="[{ required: true, message: '请输入字典编码' }]"
      >
        <n-input
          v-model:value="model.code"
          placeholder="请输入字典编码"
          :disabled="type !== 'add'"
          maxlength="30"
          clearable
        />
      </n-form-item>
      <n-form-item label="字典描述" path="description">
        <n-input
          v-model:value="model.description"
          type="textarea"
          placeholder="请输入字典描述"
          maxlength="100"
          show-count
          clearable
        />
      </n-form-item>
      <div v-if="type === 'edit'">
        <div class="flex justify-between">
          <n-form-item label="字典项"></n-form-item>
          <n-button type="primary" size="small" @click="handleAddChild">添加字典项</n-button>
        </div>
        <MyTable
          ref="$tableChild"
          :columns="columnsChild"
          :get-data="() => dictApi.getChildDicts({ fDictId: model.dictId })"
          :index="true"
          :is-pagination="false"
          :max-height="200"
          :height="260"
          :scroll-x="1000"
          :auto-load="false"
        ></MyTable>
        <MyModal
          ref="$formChild"
          :model-form="modelChild"
          :disabled="typeChild === 'view'"
          :width="900"
          @submit="handleSubmitChild"
        >
          <n-form-item
            label="字典项名称"
            path="name"
            :rule="[{ required: true, message: '请输入字典项名称' }]"
          >
            <n-input
              v-model:value="modelChild.name"
              placeholder="请输入字典项名称"
              maxlength="50"
              clearable
            />
          </n-form-item>
          <n-form-item
            label="字典项编码"
            path="code"
            :rule="[{ required: true, message: '请输入字典项编码' }]"
          >
            <n-input
              v-model:value="modelChild.code"
              placeholder="请输入字典项编码"
              :disabled="typeChild !== 'add'"
              maxlength="30"
              clearable
            />
          </n-form-item>
          <n-form-item label="字典项描述" path="description">
            <n-input
              v-model:value="modelChild.description"
              type="textarea"
              placeholder="请输入字典项描述"
              maxlength="100"
              show-count
              clearable
            />
          </n-form-item>
          <n-form-item label="字典项颜色" path="color">
            <n-color-picker v-model:value="modelChild.color" :show-alpha="false" />
          </n-form-item>
        </MyModal>
      </div>
    </MyModal>
  </CommonPage>
</template>

<script setup lang="jsx">
import * as dictApi from '@/api/dict'
import { useCrudPro } from '@/hooks/useCrudPro'
import { Search } from '@vicons/ionicons5'
import { nextTick } from 'vue'
defineOptions({ name: 'DictIndex' })
const queryItems = ref({})
const columns = [
  { key: 'name', title: '字典名称' },
  { key: 'code', title: '字典编码' },
  { key: 'description', title: '字典描述' },
  { key: 'createTime', title: '创建时间', render: ({ createTime }) => $format(createTime) },
  {
    title: '操作',
    key: 'actions',
    width: 220,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <n-button v-permission="/dict:put" text onClick={() => handleEdit(row)}>
            修改
          </n-button>
          <n-button
            v-permission="/dict:delete"
            text
            onClick={() =>
              handleDelete(row.dictId, {
                title: '删除字典',
                content: `请确定是否删除字典：${row.name}`,
              })
            }
          >
            删除
          </n-button>
        </n-flex>
      )
    },
  },
]
const { type, model, $form, $table, handleAdd, handleEdit, handleSubmit, handleDelete } =
  useCrudPro({
    name: '字典',
    initForm: {
      dictId: null,
      name: null,
      code: null,
      description: null,
    },
    apis: {
      add: dictApi.addDict,
      edit: dictApi.editDict,
      del: dictApi.deleteDict,
      info: ({ dictId }) => dictApi.getDict(dictId).then((res) => res.data),
    },
    onReady() {
      nextTick(() => {
        $tableChild.value.handleQuery()
      })
    },
  })
const columnsChild = [
  { key: 'name', title: '字典项名称', width: 140 },
  { key: 'code', title: '字典项编码', width: 140 },
  { key: 'description', title: '字典项描述', width: 140 },
  {
    key: 'color',
    title: '字典项颜色',
    width: 140,
    render(row) {
      return row.color ? <n-color-picker style="width: 100px;" disabled value={row.color} /> : ''
    },
  },
  { key: 'createTime', title: '创建时间', width: 200 },
  {
    title: '操作',
    key: 'actions',
    width: 120,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <n-button text onClick={() => handleEditChild(row)}>
            修改
          </n-button>
          <n-button
            text
            onClick={() =>
              handleDeleteChild(row.dictId, {
                title: '删除字典项',
                content: `请确定是否删除字典项：${row.name}`,
              })
            }
          >
            删除
          </n-button>
        </n-flex>
      )
    },
  },
]
const {
  type: typeChild,
  model: modelChild,
  $form: $formChild,
  $table: $tableChild,
  handleAdd: handleAddChild,
  handleEdit: handleEditChild,
  handleSubmit: handleSubmitChild,
  handleDelete: handleDeleteChild,
} = useCrudPro({
  name: '字典项',
  initForm: {
    dictId: null,
    name: null,
    code: null,
    description: null,
    color: null,
  },
  apis: {
    add: (data) => dictApi.addDict({ ...data, fDictId: model.value.dictId }),
    edit: dictApi.editDict,
    del: dictApi.deleteDict,
    info: ({ dictId }) => dictApi.getDict(dictId).then((res) => res.data),
  },
})
</script>
